<div class="flownode-page" [ngClass]="{'full-height': rendering || (layoutComponentRef && layoutComponentRef.instance.isUnAuthorized)}" #cAreaPage>
    <div class="file-maker-bar" *ngIf="fileMakeOption.showFilePerview">
        <span>内容编辑区域 正在制作: {{fileMakeOption.fileInfo?.fileName}}</span>
        <div class="spacer"></div>
        <div class="btn-ac-pl">
            <button nz-button nzType="default" (click)="exitFileMake()">返回</button>
            <button nz-button nzType="primary" (click)="downloadFile()">保存</button>
            <a nz-button nzType="link" (click)="fullScreen()" class="icon-btn ">
                <i class="iconfont icon-fullscreen-line"></i>
            </a>
        </div>
    </div>
    <div class="page-container" [ngStyle]="{'display': fileMakeOption.showFilePerview?'flex':'block'}">
        <div [ngStyle]="{'flex': fileMakeOption.showFilePerview? 3: 1}">
            <ng-container #containerRef></ng-container>
        </div>
        <div [ngStyle]="{'flex': 7}" *ngIf="fileMakeOption.showFilePerview">
            <iframe #frameEle style="width: 100%; min-height: 800px"></iframe>
        </div>
    </div>
    <ng-container *ngIf="!rendering">
        <div class="btns" *ngIf="(!hideBtnPanel && !isFinished) || isSuperEditMode;else superBtnTpl">
            <button nz-button nzType="primary" *ngIf="showAuditBtn" (click)="subAudit()"
                [disabled]="auditBtnDisable">提交审核</button>
            <button nz-button nzType="primary" *ngIf="!showAuditBtn" (click)="next()">{{isLastNode ? '完成' :
                '下一步'}}</button>
            <button nz-button nzType="primary" (click)="saveDraft()">保存草稿</button>
        </div>
        <ng-template #superBtnTpl>
            <div class="btns" *ngIf="isSuperEdit">
                <button nz-button nzType="primary" (click)="superAuthEdit()">修改</button>
            </div>
        </ng-template>
        <div class="mask"
            *ngIf="dataRegister?.status == 'closed' || (!hideBtnPanel && dataRegister?.status == 'suspend')">
            <div class="icon-div"
                [ngClass]="{'icon-div-color-red': dataRegister.status == 'closed', 'icon-div-color-yellow': dataRegister.status == 'suspend'}">
                <div class="icon-div-2"
                    [ngClass]="{'icon-div2-color-red': dataRegister.status == 'closed', 'icon-div2-color-yellow': dataRegister.status == 'suspend'}">
                    <span *ngIf="dataRegister.status == 'suspend'">暂停</span>
                    <span *ngIf="dataRegister.status == 'closed'">终止</span>
                </div>
            </div>
            <div class="main-title">
                项目
                <span *ngIf="dataRegister.status == 'suspend'">暂停</span>
                <span *ngIf="dataRegister.status == 'closed'">终止</span>
            </div>
            <div class="sub-title">
                <span *ngIf="dataRegister.status == 'closed'">
                    本任务已发起终止，流程将无法操作（编辑、修改），系统功能操作也无法在开启流程，如有疑问请联系责派。
                </span>
                <span *ngIf="dataRegister.status == 'suspend'">
                    本任务已发起暂停，流程将无法操作（编辑、修改），如需继续执行，请进入“更正”流程将任务重新开启。
                </span>
            </div>
        </div>
    </ng-container>
    <ng-container *ngIf="rendering" [ngTemplateOutlet]="renderingTpl"></ng-container>
    <ng-container *ngIf="!rendering && layoutComponentRef && layoutComponentRef.instance.isUnAuthorized">
        <div class="un-auth">
            <zepride-un-authorized></zepride-un-authorized>
        </div>
    </ng-container>
</div>

<ng-template #renderingTpl>
    <div class="rendering">
        <!-- <div class="rendering-item" *ngFor="let i of [1,2,3]">
            <nz-skeleton-element class="rendering-item-header" nzType="input" [nzActive]="true"></nz-skeleton-element>
            <div class="rendering-item-content">
                <nz-skeleton-element *ngFor="let i of [1,2,3,4,5,6]" nzType="input" [nzActive]="true">
                </nz-skeleton-element>
            </div>
        </div> -->
        <nz-spin nzSimple></nz-spin>
    </div>
</ng-template>
